<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { Card, Col, Descriptions, Row } from 'ant-design-vue';
import { formatDate } from '@vben/utils';
import type { IoTOtaFirmware } from '#/api/iot/ota/firmware';
import * as IoTOtaFirmwareApi from '#/api/iot/ota/firmware';
import * as IoTOtaTaskRecordApi from '#/api/iot/ota/task/record';
import { IoTOtaTaskRecordStatusEnum } from '#/views/iot/utils/constants';
import OtaTaskList from '../task/OtaTaskList.vue';

/** IoT OTA 固件详情 */
defineOptions({ name: 'IoTOtaFirmwareDetail' });

const route = useRoute();

const firmwareId = ref(Number(route.params.id));
const firmwareLoading = ref(false);
const firmware = ref<IoTOtaFirmware>({} as IoTOtaFirmware);

const firmwareStatisticsLoading = ref(false);
const firmwareStatistics = ref<Record<string, number>>({});

/** 获取固件信息 */
const getFirmwareInfo = async () => {
  firmwareLoading.value = true;
  try {
    firmware.value = await IoTOtaFirmwareApi.getOtaFirmware(firmwareId.value);
  } finally {
    firmwareLoading.value = false;
  }
};

/** 获取升级统计 */
const getStatistics = async () => {
  firmwareStatisticsLoading.value = true;
  try {
    firmwareStatistics.value = await IoTOtaTaskRecordApi.getOtaTaskRecordStatusStatistics(
      firmwareId.value,
    );
  } finally {
    firmwareStatisticsLoading.value = false;
  }
};

/** 初始化 */
onMounted(() => {
  getFirmwareInfo();
  getStatistics();
});
</script>

<template>
  <div class="p-4">
    <!-- 固件信息 -->
    <Card title="固件信息" class="mb-5" :loading="firmwareLoading">
      <Descriptions :column="3" bordered>
        <Descriptions.Item label="固件名称">
          {{ firmware?.name }}
        </Descriptions.Item>
        <Descriptions.Item label="所属产品">
          {{ firmware?.productName }}
        </Descriptions.Item>
        <Descriptions.Item label="固件版本">
          {{ firmware?.version }}
        </Descriptions.Item>
        <Descriptions.Item label="创建时间">
          {{ firmware?.createTime ? formatDate(firmware.createTime, 'YYYY-MM-DD HH:mm:ss') : '-' }}
        </Descriptions.Item>
        <Descriptions.Item label="固件描述" :span="2">
          {{ firmware?.description }}
        </Descriptions.Item>
      </Descriptions>
    </Card>

    <!-- 升级设备统计 -->
    <Card title="升级设备统计" class="mb-5" :loading="firmwareStatisticsLoading">
      <Row :gutter="20" class="py-5">
        <Col :span="6">
          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
            <div class="text-3xl font-bold mb-2 text-blue-500">
              {{
                Object.values(firmwareStatistics).reduce((sum: number, count) => sum + (count || 0), 0) ||
                0
              }}
            </div>
            <div class="text-sm text-gray-600">升级设备总数</div>
          </div>
        </Col>
        <Col :span="3">
          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
            <div class="text-3xl font-bold mb-2 text-gray-400">
              {{ firmwareStatistics[IoTOtaTaskRecordStatusEnum.PENDING.value] || 0 }}
            </div>
            <div class="text-sm text-gray-600">待推送</div>
          </div>
        </Col>
        <Col :span="3">
          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
            <div class="text-3xl font-bold mb-2 text-blue-400">
              {{ firmwareStatistics[IoTOtaTaskRecordStatusEnum.PUSHED.value] || 0 }}
            </div>
            <div class="text-sm text-gray-600">已推送</div>
          </div>
        </Col>
        <Col :span="3">
          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
            <div class="text-3xl font-bold mb-2 text-yellow-500">
              {{ firmwareStatistics[IoTOtaTaskRecordStatusEnum.UPGRADING.value] || 0 }}
            </div>
            <div class="text-sm text-gray-600">正在升级</div>
          </div>
        </Col>
        <Col :span="3">
          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
            <div class="text-3xl font-bold mb-2 text-green-500">
              {{ firmwareStatistics[IoTOtaTaskRecordStatusEnum.SUCCESS.value] || 0 }}
            </div>
            <div class="text-sm text-gray-600">升级成功</div>
          </div>
        </Col>
        <Col :span="3">
          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
            <div class="text-3xl font-bold mb-2 text-red-500">
              {{ firmwareStatistics[IoTOtaTaskRecordStatusEnum.FAILURE.value] || 0 }}
            </div>
            <div class="text-sm text-gray-600">升级失败</div>
          </div>
        </Col>
        <Col :span="3">
          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
            <div class="text-3xl font-bold mb-2 text-gray-400">
              {{ firmwareStatistics[IoTOtaTaskRecordStatusEnum.CANCELED.value] || 0 }}
            </div>
            <div class="text-sm text-gray-600">升级取消</div>
          </div>
        </Col>
      </Row>
    </Card>

    <!-- 任务管理 -->
    <OtaTaskList
      v-if="firmware?.productId"
      :firmware-id="firmwareId"
      :product-id="firmware.productId"
      @success="getStatistics"
    />
  </div>
</template>
